<template>
    <div class="product-container">
      <!-- 使用整合后的顶部组件 -->
      <AuthorTopBar
          :author="detail.user"
          :isFollowed="isFollowed"
          @back="handleBack"
          @follow="handleFollow"
      />
   <!-- 轮播图组件：支持左右滑动切换，自动播放 -->
   <van-swipe
       class="product-swipe"
       :autoplay="3000"
       indicator-color="white"
       :loop="true"
   >
     <van-swipe-item
         v-for="(image, index) in parsedImages"
         :key="index"
     >
       <img
           :src="image"
           class="product-image"
           :alt="`商品图片${index + 1}`"
       />
     </van-swipe-item>
   </van-swipe>
   <div class="product-title">
     {{ detail?.title || '加载中...' }}
     <!-- 浏览和收藏统计 -->
     <div class="stats">
      <span class="stat-item">
        <van-icon name="eye-o" color="#999" size="16" />
        <span>{{ detail.viewCount || 0 }}</span>
      </span>
     </div>
   </div>
   <!-- 标签区域 -->
   <div class="product-tags" v-if="parsedTags.length">
      <span
          class="tag-item"
          v-for="(tag, index) in parsedTags"
          :key="index"
      >
        {{ tag }}
      </span>
   </div>
   <!-- 4. 价格区域（新增） -->
   <div class="product-price">
     <!-- 价格数字 -->
     <span class="price-num">¥{{ detail?.price || 0 }}</span>
     <!-- 价格后缀（出售/出租周期） -->
     <span class="price-suffix">
        {{ getPriceSuffix }}
      </span>
   </div>
   <!-- 5. 详情内容区域（新增） -->
   <div class="product-desc-section">
     <!-- 详情标题 -->
     <div class="desc-title">商品详情</div>
     <!-- 详情内容 -->
     <div class="desc-content">
       <!-- 处理空内容：显示“暂无详情”，避免空白 -->
       {{ detail?.description || '暂无商品详情介绍' }}
     </div>
   </div>
   <ProductBottomBar
       :isCollected="isCollect"
       @contact="handleContact"
        @buy="handleBuy"
       @collect="handleCollect"
   />
 </div>
</template>

<script setup lang="ts">
import { ref, onMounted ,computed} from "vue";
import axios from "@/utils/axios.ts";
import { useRoute,useRouter } from 'vue-router';
// 导入Vant轮播组件（如果没全局注册的话）
import { Swipe, SwipeItem } from 'vant';
//导入子组件
import ProductBottomBar from "@/components/ProductBottomBar.vue";
import AuthorTopBar from "@/components/AuthorTopBar.vue";
import { showToast } from "vant"; // 导入Vant的提示组件（需先安装）
const route = useRoute();
const router = useRouter();
const detail = ref<any>({});
const id = route.params.id as string;

// 解析图片字符串为数组（单独定义，方便复用）
const parsedImages = ref<string[]>([]);
// 存储解析后的标签数组
const parsedTags = ref<string[]>([]);
let isFollowed = ref(false);
let isCollect = ref(false);
onMounted(() => {
  axios.post("/api/userItems/getById", { id: id }, {
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
  })
      .then(res => {
        detail.value = res;
        // 解析图片字符串为数组并赋值
        parsedImages.value = JSON.parse(detail.value.images || '[]');
        // 解析标签字符串为数组
        parsedTags.value = JSON.parse(detail.value.tag || '[]');
        console.log("解析后的图片数组：", parsedImages.value);
        console.log("detail1111::::"+detail.value.itemId)
        //token
        axios.post("/api/userFriends/isFollow?user_id="+2+"&friend_id="+detail.value.userId)
            .then(res =>{
              if(res.msg === "true"){
                isFollowed.value=true;
              }
              console.log("isFollowed:"+isFollowed.value);
            })
        console.log("detail.value.itemId"+detail.value.itemId);
        axios.post("/api/itemCollections/isCollect/"+2+"/"+detail.value.itemId)
            .then(res =>{
              if(res.msg === "true"){
                isCollect.value=true;
              }
              console.log("isCollect:"+isCollect.value);
            })
      })
      .catch(error => {
        console.error("获取商品详情失败：", error);
      });
});
// 计算价格后缀（根据type和rentType返回对应文字）
const getPriceSuffix = computed(() => {
  const type = detail.value.type; // 1=出售，2=出租
  const rentType = detail.value.rentType; // 1=天，2=周，3=月
  const rentCount = detail.value.rentCount; // 天数/周数/月数

  // 场景1：出售（type=1）
  if (type === 1) {
    return ' 出售';
  }

  // 场景2：出租（type=2）
  if (type === 2) {
    // 先匹配出租周期文字
    const rentTypeText = {
      1: '天',
      2: '周',
      3: '月'
    }[rentType] || ''; // 若rentType无效，显示空

    // 若有rentCount（时长），则显示“X天/周/月”，否则只显示周期
    return rentCount ? `/${rentCount}${rentTypeText} 出租` : `/${rentTypeText} 出租`;
  }

  // 其他情况（type无效）
  return '';
});
// 处理返回逻辑
const handleBack = () => {
  router.back(); // 返回上一页
};
// 处理关注/取关事件（核心逻辑）
const handleFollow = async (newFollowState: boolean) => {
  // 1. 获取必要参数（当前登录用户ID和作者ID）
  //token
  const currentUserId = 2; // 实际项目中从登录态获取（如localStorage）
  const authorUserId = detail.value?.userId; // 从商品详情中获取作者ID

  // 2. 校验参数（避免接口报错）
  if (!authorUserId) {
    showToast("作者信息获取失败");
    return;
  }

  try {
    // 3. 根据新状态调用不同接口
    let apiUrl = "";
    if (newFollowState) {
      // 关注：调用follow接口
      apiUrl = `/api/userFriends/follow/${currentUserId}/${authorUserId}`;
    } else {
      // 取关：调用unFollow接口
      apiUrl = `/api/userFriends/unFollow/${currentUserId}/${authorUserId}`;
    }

    // 4. 发起请求
    const res = await axios.post(apiUrl);

    // 5. 处理接口响应
    if (res.code === 200) { // 假设后端成功返回code=200
      isFollowed.value = newFollowState; // 更新状态（子组件会自动同步）
      showToast(newFollowState ? "关注成功" : "取关成功");
    } else {
      // 接口返回错误（如已关注过、数据库异常）
      showToast(res.msg || "操作失败");
      // 回滚状态（避免UI和实际状态不一致）
      isFollowed.value = !newFollowState;
    }
  } catch (error) {
    // 网络错误等异常
    showToast("网络异常，请重试");
    // 回滚状态
    isFollowed.value = !newFollowState;
  }
};

const handleCollect = async (newCollectState: boolean) =>{
  //token
  const currentUserId = 2; // 实际项目中从登录态获取（如localStorage）
  const itemId = detail.value?.itemId;
  try {
    // 3. 根据新状态调用不同接口
    let apiUrl = "";
    if (newCollectState) {
      // 关注：调用follow接口
      apiUrl = `/api/itemCollections/collect/${currentUserId}/${itemId}`;
    } else {
      // 取关：调用unFollow接口
      apiUrl = `/api/itemCollections/unCollect/${currentUserId}/${itemId}`;
    }

    // 4. 发起请求
    const res = await axios.post(apiUrl);

    // 5. 处理接口响应
    if (res.code === 200) { // 假设后端成功返回code=200
      isCollect.value = newCollectState; // 更新状态（子组件会自动同步）
      showToast(newCollectState ? "收藏成功" : "取消收藏");
    } else {
      // 接口返回错误（如已关注过、数据库异常）
      showToast(res.msg || "操作失败");
      // 回滚状态（避免UI和实际状态不一致）
      isCollect.value = !newCollectState;
    }
  } catch (error) {
    // 网络错误等异常
    showToast("网络异常，请重试");
    // 回滚状态
    isCollect.value = newCollectState;
  }
}
// 2. 补充 handleContact（处理联系卖家事件）
const handleContact = () => {
  console.log("点击联系卖家，卖家信息：", detail.value.user);
  // 可添加显示卖家电话、打开聊天窗口等逻辑
};
// 工具函数：格式化日期为 "YYYY-MM-DD HH:mm:ss" 格式
const formatDate = (date: Date): string => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，补0
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

// 生成包含当前时间的订单数据
//token
// 3. 补充 handleBuy（处理立即购买事件）- 修复后
const handleBuy = async () => {
  // 1. 先校验 detail.value 是否有值（避免接口未加载完就点击）
  if (!detail.value || !detail.value.itemId) {
    showToast("商品信息未加载完成，请稍后再试");
    return;
  }

  // 2. 动态生成订单数据（此时 detail.value 已赋值，字段都有值）
  const itemOrderData = {
    itemId: detail.value.itemId, // 此时 itemId = 1（正确）
    buyerId: 2, // 实际项目中从登录态获取，不要硬编码token
    sellerId: detail.value.userId, // 从商品详情中获取卖家ID（正确）
    type: detail.value.type, // 从商品详情中获取类型（1=出售/2=出租，正确）
    price: detail.value.price, // 从商品详情中获取价格（正确）
    quantity: null, // 若无需数量，可传 null（需确保后端允许）
    rent_days: formatDate(new Date()), // 之前的时间格式化函数，按需添加
  };

  // 3. 发起创建订单请求（建议加 async/await 处理异步，更易调试）
  try {
    const res = await axios.post("/api/itemOrders/createOrders", itemOrderData, {
      headers: { "Content-Type": "application/json" } // 显式指定 JSON 格式（axios 传对象时可省略，但加了更稳妥）
    });

    // 4. 处理接口响应
    if (res.code === 200) {
      showToast("订单创建成功！");
      //console.log("res.data.orderId:"+res.data.orderId)
      // 跳转订单详情页（携带订单号等参数）
      updateItemStatus();//修改用户物品状态为已出售或已出租
      router.push({
        path: "/itemOrder",
        query: { orderId: res.data.orderId } // 假设后端返回订单号
      });
    } else {
      showToast(res.msg || "订单创建失败");
    }
  } catch (error) {
    showToast("网络异常，订单创建失败");
    console.error("创建订单请求错误：", error);
  }
};
const updateItemStatus = () =>{
  axios.post("/api/userItems/updateStatus?id="+detail.value.itemId)
}
</script>

<style scoped>
.product-container {
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
}
.product-title {
  position: relative; /* 为内部绝对定位元素做父容器 */
}
.stats {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%); /* 垂直居中 */
  display: flex;
  gap: 16px;
  align-items: center;
}
.stat-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #999;
}
.stat-item van-icon {
  margin-right: 4px;
}
/* 轮播容器样式 */
.product-swipe {
  width: 100%;
  /* 可选：设置固定高度，避免图片加载前高度闪烁 */
  height: 300px;
  background-color: #f5f5f5; /* 加载前的背景色 */
}

/* 轮播图片样式 */
.product-image {
  width: 100%;
  height: 100%;
  /* 保持图片比例并覆盖容器 */
  object-fit: cover;
}
.product-title {
  font-size: 18px;
  font-weight: bold;
  margin: 15px 0;
  color: #333;
  line-height: 1.5;
}
/* 标签样式 */
.product-tags {
  display: flex;
  flex-wrap: wrap; /* 标签太多时自动换行 */
  gap: 8px; /* 标签之间的间距 */
  margin: 10px 0;
}
.tag-item {
  padding: 4px 8px;
  background-color: #f0f0f0;
  border-radius: 4px;
  font-size: 14px;
  color: #666;
}
/* 详情内容样式（新增） */
.product-desc-section {
  margin: 15px 0;
  padding: 12px;
  background-color: #fafafa; /* 浅灰色背景，突出内容区 */
  border-radius: 8px; /* 圆角，柔和不生硬 */
}
.desc-title {
  font-size: 16px;
  font-weight: 600; /* 中等加粗，比正文醒目 */
  color: #333;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #eee; /* 虚线分隔标题和内容，更精致 */
}
.desc-content {
  font-size: 15px;
  color: #555; /* 正文用深灰色，比纯黑柔和，不刺眼 */
  line-height: 1.8; /* 行高1.8，多行长文本不拥挤 */
  white-space: pre-wrap; /* 保留文本中的换行符，避免内容挤在一起 */
  word-break: break-all; /* 长单词/链接自动换行，不超出容器 */
}
</style>
